{% block sw_tabs %}
<div
    class="sw-tabs"
    :class="tabClasses"
>

    {% block sw_tabs_content %}
    <div
        ref="swTabContent"
        class="sw-tabs__content"
        :style="tabContentStyle"
        role="tablist"
    >
        {% block sw_tabs_content_slot %}
        <slot :active="active"></slot>
        {% endblock %}

        <sw-tabs-item
            v-for="tabExtension in tabExtensions"
            :key="tabExtension.componentSectionId"
            :name="tabExtension.componentSectionId"
            :active-tab="active"
            :route="hasRoutes ? {
                path: tabExtension.componentSectionId
            } : ''"
        >
            {{ $tc(tabExtension.label ?? '') }}
        </sw-tabs-item>

        {% block sw_tabs_slider %}
        <span
            class="sw-tabs__slider"
            :class="sliderClasses"
            :style="sliderStyle"
        ></span>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_tabs_arrow_left %}
    <button
        v-if="isScrollable"
        class="sw-tabs__arrow sw-tabs__arrow--left"
        :class="arrowClassesLeft"
        @click="scrollTo('left')"
    >
        <mt-icon name="regular-chevron-left-xs" />
    </button>
    {% endblock %}

    {% block sw_tabs_arrow_right %}
    <button
        v-if="isScrollable"
        class="sw-tabs__arrow sw-tabs__arrow--right"
        :class="arrowClassesRight"
        @click="scrollTo('right')"
    >
        <mt-icon name="regular-chevron-right-xs" />
    </button>
    {% endblock %}

    <div class="sw-tabs__custom-content">
        {% block sw_tabs_custom_content %}
        <slot
            name="content"
            :active="active"
        ></slot>
        {% endblock %}

        <template v-if="!hasRoutes">
            <template
                v-for="tabExtension in tabExtensions"
                :key="tabExtension.componentSectionId"
            >
                <sw-extension-component-section
                    v-if="tabExtension.componentSectionId === active"
                    :position-identifier="tabExtension.componentSectionId"
                />
            </template>
        </template>
    </div>

</div>
{% endblock %}
